<template>
  <div class="b-l mb-2">
    <div class="bg-grey py-1 px-2">{{bet.betType}} {{bet.additional ? '追加' : ''}} {{bet.bets}}注{{bet.amount}}元</div>
    <div class="tips spacing-sm p-2" v-html="stringify(bet.content)"></div>
  </div>
</template>

<script>
export default {
  name: 'daletou-bet',
  props: ['bet', 'results'],
  methods: {
    stringify (bet) {
      var [[q, w], [e, r]] = bet.split('|').map(s => s.split('*').map(b => b.split(',').sort()))
      var [x = [], y = []] = this.res
      q = q.map(a => x.includes(a) ? `<b>${a}</b>` : a)
      if (w) {
        w = w.map(a => x.includes(a) ? `<b>${a}</b>` : a)
      }
      e = e.map(a => y.includes(a) ? `<a>${a}</a>` : a)
      if (r) {
        r = r.map(a => y.includes(a) ? `<a>${a}</a>` : a)
      }
      return `${w ? `(${q.join(' ')}) ${w.join(' ')}` : q.join(' ')} |
              ${r ? `(${e.join(' ')}) ${r.join(' ')}` : e.join(' ')}`
    }
  },
  computed: {
    res () {
      if (this.results) {
        return this.results.split('|').map(e => e.split(','))
      }
      return []
    }
  }
}
</script>

